<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8">
   <style>
      body {
         margin: 0%;
      }

      body {
         background-color: pink;
      }

      .div {
         height: 60px;
         width: 600px;
         color: pink;
         background-color: black;
         font-weight: 700;
         font-size: 50px;
         line-height: 60px;
         margin: 0 auto;
      }

      .nav a {
         display: inline-block;
         text-decoration: none;
         background: pink;
         text-align: center;
         color: white;
         margin: 10px 100px;
         font-size: 20px;
      }

      div ul li a {
         text-decoration: none;
         color: pink;
      }

      div ul li a:hover {
         color: black;
      }

      nav {
         text-align: center;
        background-color: black;
      }

      .menu ul li {
         float: left;
         margin-right: 50px;
         margin-top: 20px;
         position: relative;
      }

      .nav .bg1:hover {
         background-color: black;
         color: pink;
      }

      .header {
         background-image: url(1.webp);
         
      }

      .a1 {
         margin-top: 5px;
         height: 600px;
         width: 100%;
         padding-top: 50px;

      }

      #a2 {
         display: flex;
      }

      .a2 {
         border: 5px;
         border-color: aliceblue;
      }

      .a3 {
         height: 600px;
         width: 400px;
      }

      .a4 {
         font-size: 16px;
         font-family: KaiTi;
         padding-left: 50px;
         padding-bottom: 50px;
         display: block;
      }

      .a5 {
         font-size: 70px;
         font-family: STLiti;
         display: block;
         padding-top: 50px;
      }

      .a6 {
         background-image: url(5.webp);
         background-attachment: fixed;
         width: 100%;
         height: 600px;
         background-size: 100%;
         background-repeat: no-repeat;
         padding-top: 150px;
         padding-left: 100px;
      }

      #a7 {
         color: pink;
      }

      .a8 {
         height: 1200px;
         width: 100%;
         background-image: url(6.jpg);
         background-size: 100%;
         background-repeat: no-repeat;
         padding-top: 150px;
         padding-left: 100px;
      }

      .a9 {
         background-image: url(9.webp);
         background-attachment: fixed;
         width: 100%;
         height: 800px;
         background-size: 100%;
         background-repeat: no-repeat;
         padding-top: 100px;
         padding-left: 100px;
      }

      .a10 {
         width: 200px;
         height: 500px;
         background-color: rgba(63, 58, 58, 0.2);

      }

      body {
         margin: 0%;
      }

      ul {
         margin: 0px;
         padding: 0%;
         list-style: none;
      }

      .a10 ul li {
         height: 40px;
         line-height: 40px;
         font-size: 25px;
         border: 1px solid black;
      }

      #a11 {
        position: fixed;
        width: 80px;
        height: 175px;
        background-color: rgb(100, 93, 93);
        float: center;
        text-align: center;
      }

      #a12 {
         list-style: none;
      }

      .menu ul li ul {
         width: 50px;
         height: 100px;
         margin-left: 98px;
         background-color: rgba(63, 58, 58, 0.4);
         display: none;
         position: absolute;
         
      }

      .menu ul li:hover ul {
         display: block;
      }
      .menu{
         width: 100%;
         height: 80px;
         background-color: bisque;
      }
      .a13{
         padding-top: 300px;
         text-align: center;
      }
   </style>
</head>

<body>
   <header class="header">
      <div class="div">FAMILY OF BLACKPINK </div>
      <div class="menu">
      <nav class="nav">
         <ul>
            <li><a href="1.html" class="bg1">Lisa</a>
               <ul id="a12">
                  <li style="color:aliceblue">dance</li>
                  <li style="color:aliceblue">song</li>
               </ul>
            </li>
            <li><a href="2.html" class="bg1">Jennie</a>
               <ul id="a12">
                  <li style="color:aliceblue">dance</li>
                  <li style="color:aliceblue">song</li>
               </ul>
            </li>
            <li>
               <a href="3.html" class="bg1">Rose</a>
               <ul id="a12">
                  <li style="color:aliceblue">dance</li>
                  <li style="color:aliceblue">song</li>
               </ul>
            </li>
            <Li><a href="4.html" class="bg1">Jisoo</a>
               <ul id="a12">
                  <li style="color:aliceblue">dance</li>
                  <li style="color:aliceblue">song</li>
               </ul>
            </Li>
         </ul>
      </nav>
   </div>
   </header>
   <main>
      <div class="a10" id="a11">
         <ul>
            <li><a href="1.html" class="a11">Lisa</a>

            </li>
            <li><a href="2.html" class="a11">Rose</a>

            </li>
            <li><a href="3.html" class="a11">Jennie</a>

            </li>
            <li><a href="4.html" class="a11">Jisoo</a>

            </li>
         </ul>
      </div>
      <div class="a1" id="a2">
         <table class="a2">
            <tr>
               <td>
                  <img src="12.webp" class="a3">
               </td>
               <td>
                  <img src="13.webp" class="a3">
               </td>
            </tr>
         </table>
         <p class="a4"><strong class="a5">人间芭比·Lisa</strong><br>
            可辣可甜可飒，大长腿，大美女，好爱好爱，团内主领舞，rapper
            <br>
            代表作品：attention（信仰之跃），whistle。
         </p>
      </div>
      <div class="a6">
         <h1 class="a5">Rose</h1>
         <p class="a4" id="a7">中文名：朴彩英
            <br>
            一位兼具少年感和少女感的绝绝子，
            <br>在团内担任主唱和领舞<br>
            代表作品：BOOMBAYAH,ON THE GROUND.
         </p>
      </div>
      <div class="a8">
         <h1 class="a5">Jennie</h1>
         <P class="a4">
            小奶猫，超级可爱，中文名：金珍妮<br>
            团内主rapper，领唱，ACE<br>
            代表作品：SOLO,SQUARE UP.
         </P>
      </div>
      <div class="a9" id="a7">
         <h1 class="a5">Jisoo</h1>
         <p class="a4" id="a7">
            中文名：金智秀，演员，歌手<br>
            团内主唱，门面。
            代表作品：THIS LOVE,KILL.
         </p>
      </div>

   </main>
   <footer>
      <div class="a13">下次见</div>
   </footer>
</body>
</html>